<div id="base-config" class="page-layout simple fullwidth docs">

    <!-- HEADER -->
    <div class="header accent p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
        <div fxLayout="column" fxLayoutAlign="center start">
            <div fxLayout="row" fxLayoutAlign="start center">
                <mat-icon class="secondary-text s-18">home</mat-icon>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Documentation</span>
                <mat-icon class="secondary-text s-16">chevron_right</mat-icon>
                <span class="secondary-text">Services</span>
            </div>
            <div class="h2 mt-16">Base Config</div>
        </div>
    </div>
    <!-- / HEADER -->

    <!-- CONTENT -->
    <div class="content p-24">

        <p>
            <code>Config</code> is a custom built Base service allows to have a granular control over the Base. It can
            be used for changing theme options (layout, color etc.) by component basis.
        </p>

            <div class="section-title">Usage</div>
            <p class="py-8">

            <base-highlight lang="typescript">
                <textarea #source>

                    export class SomeComponent
                    {
                        config: any;

                        constructor(
                            private _baseConfigService: BaseConfigService
                        )
                        {
                            // Fully customizable surroundings for this particular component
                            this._baseConfigService.config = {
                                colorTheme      : 'theme-default-dark',
                                layout          : {
                                    style    : 'vertical-layout-1',
                                    width    : 'fullwidth',
                                    navbar   : {
                                        primaryBackground  : 'base-navy-700',
                                        secondaryBackground: 'base-navy-900',
                                        folded             : false,
                                        hidden             : false,
                                        position           : 'left',
                                        variant            : 'vertical-style-1'
                                    },
                                    toolbar  : {
                                        customBackgroundColor: false,
                                        background           : 'base-white-500',
                                        hidden               : false,
                                        position             : 'below-static'
                                    },
                                    footer   : {
                                        customBackgroundColor: true,
                                        background           : 'base-navy-900',
                                        hidden               : false,
                                        position             : 'below-fixed'
                                    },
                                    sidepanel: {
                                        hidden  : false,
                                        position: 'right'
                                    }
                                },
                                customScrollbars: true
                            });
                        }

                        onInit()
                        {
                            // Subscribe to config change
                            this._baseConfigService.config
                                .subscribe((config) => {
                                    this.config = config;
                                });
                        }
                    }

                </textarea>
            </base-highlight>

        </p>

    </div>

</div>

